En este artículo, entenderemos cómo se utiliza Object.assign() en el código fuente de Zustand.

El fragmento de código anterior es de vanilla.ts, cuando estableces un estado, Object.assign se usa para actualizar tu objeto de estado.

Primero comprendamos los conceptos básicos de Object.assign:

Objeto.asignar()

El método estático Object.assign() copia todas las propiedades propias enumerables de uno o más objetos de origen a un objeto de destino. Devuelve el objeto de destino modificado.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

el valor b en el objeto de destino se reemplaza con el valor b en el objeto de origen.

Muy simple, ¿verdad? Ahora realicemos algunos experimentos y comprendamos cómo setState de Zustand aprovecha el método Object.assign().

Object.assign() en el código fuente de Zustand:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

Ese es el operador ternario anidado que se encuentra en el fragmento de código anterior. si el reemplazo no es nulo, el estado será reemplazado o si nextState no es un objeto, simplemente devuelva nextState tal como está, pero lo que nos interesa es Object.assign({}, state, newState).

Primero registremos y veamos qué hay en state y nextState cuando actualice su estado. El ejemplo que elegí es un ejemplo de demostración en el código fuente de Zustand. Modifiqué un poco el código para que podamos poner algunas declaraciones de consola y ejecutar estos experimentos.

En este ejemplo simple, cuando se incrementa el recuento, todo se reduce a actualizar el objeto de estado usando Object.assign.

La próxima vez que intentes realizar algunas actualizaciones en tu objeto JSON, utiliza Object.assign.

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar las mejores prácticas inspiradas en proyectos de código abierto.

10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.

Somos de código abierto — https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

¿Busca crear sistemas web personalizados para su empresa? Contáctenos en [email protected]

Acerca del autor:

Hola, soy Ram. Soy un apasionado ingeniero de software/OSS Tinkerer.

Visite mi sitio web: https://www.ramunarasinga.com/

Referencias:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign